<template>
	<view  style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<view style="display: flex;width: 700rpx;border-radius: 20rpx; flex-wrap: wrap; margin: 15rpx auto 0 auto; padding: 0rpx 30rpx 25rpx 30rpx;justify-content: space-between;">
			<view style="margin-top: 20rpx;">
				<text style="color: blue;font-weight: 700;">课程名称：</text>{{kecheng1.name}}
			</view>
			<view style="margin-top: 20rpx;">
				<text style="color: blue;font-weight: 700;">所在校区：</text>{{kecheng1.xiaoqu}}
			</view>
			<view style="margin-top: 20rpx;">
				<text style="color: blue;font-weight: 700;">任课老师：</text>{{kecheng1.laoshi}}
			</view>
		</view>
		<!-- 核销数据列表 -->
		<view style="display: flex;flex-direction: row;width: 95%;margin: 20rpx auto 5rpx auto;">
			<view style="display: flex;flex: 1;justify-content: center;">
				姓名
			</view>
			<view style="display: flex;flex: 1;justify-content: center;">
				课程
			</view>
			<view style="display: flex;flex: 1;justify-content: center;">
				已核销/总课程
			</view>
		</view>
		<!-- 课程内容 -->
		<checkbox-group  @change="changeCheckbox" shape="circle" style="display: block;width: 100%; ">
			<view v-for="(item,index) in xueshenglist" :key="item._id" class=""  >
				<view style="display: flex;background-color: white;border-radius: 20rpx;box-shadow: 1px 1px 5px #c2c2c2;width: 95%;margin:15rpx auto;padding: 15rpx 0;">
					<view style="display: flex;margin-left: 20rpx;flex:1;">
						<!-- 前面的复选框 -->
						<view style="display: flex;margin: auto;">
							<checkbox :value="String(item._id)" :checked="checkedArr.includes(String(item._id))" :class="{'checked':checkedArr.includes(String(item._id))}"></checkbox>
						</view>	
					</view>
					<view v-if="item.id[0]" @click="xueshenginfor1(item)"  style="display: flex;flex:3;font-size: 28rpx; color:black;flex-direction: row; margin-left:10rpx; align-items: center;">
						{{item.id[0].name}}
					</view>
					<view  @click="xueshenginfor1(item)"  style="display: flex;flex: 8; justify-content: center; font-size: 28rpx; color:black;align-items: center; ">
						{{item.kecheng}}
					</view>
					<view  style="display: flex;flex:4; justify-content: center; font-size: 28rpx; color:black;align-items: center; ">
						{{item.yihexiaoshu || 0}}/
						<text style="color: blue;">{{item.kechengshu}}</text>
					</view>
				</view>	
			</view>
		</checkbox-group>
		<!-- 单独的那个全选按钮 -->
		<view v-if="show1" style="margin-top:20rpx;margin-left: 40rpx;">
			<checkbox-group @change="allChoose">
				<label>
					<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox> 全选
				</label>
			</checkbox-group>
		</view>
		<view v-if="show1" style="display: flex;width: 100px;justify-content: center;margin: 10rpx auto;">
			<uni-file-picker limit="1" :del-icon="true" :imageStyles="imageStyles" file-mediatype="image"
				 @success="fanhuiurl" @delete="delpic">
				 集体照
			</uni-file-picker>
		</view>
		<view v-if="show1 && meiyi_userinfo.permission.indexOf('hexiao_keceng')!=-1"  @click="hexiao" style="display: flex;width: 40%;background-color: blue;border-radius: 20rpx;align-items: center;justify-content: center;padding: 15rpx 0;color: white;margin: 50rpx auto;">
			核销课程
		</view>
		
		<view v-if="show1 && meiyi_userinfo.permission.indexOf('buxiao_kecheng')!=-1"  @click="buxiaokecheng" style="display: flex;width: 40%;background-color: brown;border-radius: 20rpx;align-items: center;justify-content: center;padding: 15rpx 0;color: white;margin: 50rpx auto;">
			补销课程
		</view>
		
		<!-- 弹出层，选择条件用 -->
		<u-popup style="margin-top:30rpx;" :round="15"  :show="show" mode="center" >	
			<view style="display: flex;padding:40rpx 50rpx;flex-direction: column;">
				<view style="display: flex;width:500rpx;margin: 10rpx auto 30rpx auto;justify-content: center;color: blue;font-size: 35rpx;font-weight: bold;letter-spacing:3rpx;">
					补销课程，请填写备注！
				</view>
				<view class="">
					<uni-easyinput type="textarea" autoHeight v-model="shu4" placeholder="请填写补销课程的原因!" />
				</view>
				<view style="display: flex;">
					<view @click="buxiaokecheng1" style="display: flex;width: 40%;background-color:blue;border-radius: 20rpx;align-items: center;justify-content: center;padding: 15rpx 0;color: white;margin: 50rpx auto 0 auto;">
						确认
					</view>
					<view @click="show=false" style="display: flex;width: 40%;background-color:blue;border-radius: 20rpx;align-items: center;justify-content: center;padding: 15rpx 0;color: white;margin: 50rpx auto 0 auto;">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	export default {
		data() {
			return {
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "blue",
						width: 2,
						style: 'dashed',
						radius: '12px'
					}
				},
				checkedArr:[], //复选框选中的值
				allChecked:false, //是否全选
				meiyi_userinfo:{
					Permissions:[],
					},
				hexiaolist:[],
				hexiaolist1:[],
				kecheng1:{},
				mobile:'',
				xueshenglist:[{id:''}],
				checkboxs: [],
				checkboxs1: [],
				show:false,//补销课程时弹窗
				show1:false,//集体照片和两个按键是否显示
				shu2:'',//核销课程时拍照上传的地址
				shu3:'',//核销时用来记录日期
				shu4:'',//补销课程时记录备注信息
			}
		},
		
		async onLoad() {
			let meiyi_name_tel =await uni.getStorageSync('meiyi_name_tel')
			this.jingshouren = meiyi_name_tel.name + meiyi_name_tel.mobile
			this.meiyi_userinfo = await uniCloud.getCurrentUserInfo()
			console.log(this.meiyi_userinfo);
			this.kecheng1=await uni.getStorageSync('aoyashengkecheng1')
			console.log('999',this.kecheng1);
			this.xueshenginfor()
		},
		methods: {
			// 点【补销课程时，弹窗出现】
			buxiaokecheng(){
				if(this.checkedArr.length==0){
					uni.showToast({
						title: '未选择学生！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				this.show=true
				this.shu4=''
			},
			// 补销课程弹窗中，点确定时运行
			buxiaokecheng1(){
				if(this.shu4){
					this.fun2()
					this.show=false
				}else{
					uni.showToast({
						title: '请填写补销课程的原因',
						icon:'none',
						duration:3000
					});
				}
				
			},
			// 上传成功返回
			fanhuiurl(e) {
				this.shu2 = e.tempFiles[0].fileID
			},
			// 删除照片
			delpic(e) {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 0,
						picurl: [e.tempFile.fileID]
					}
				}).then(res => {
					this.shu2 = ""
				})
			},
			// 多选复选框改变事件
			changeCheckbox(e){
				this.checkedArr = e.detail.value;
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if(this.checkedArr.length>0 && this.checkedArr.length==this.xueshenglist.length){
					this.allChecked=true;
				}else{
					this.allChecked=false;
				}
			},
			// 全选事件
			allChoose(e){
				let chooseItem = e.detail.value;
				// 全选
				if(chooseItem[0]=='all'){
					this.allChecked=true;
					for(let item of this.xueshenglist){
						let itemVal=String(item._id);
						if(!this.checkedArr.includes(itemVal)){
							this.checkedArr.push(itemVal);
						}
					}
				}else{
					// 取消全选
					this.allChecked=false;
					this.checkedArr=[];
				}
			},
			// 学生信息的调取,打开新网址显示学生信息
			xueshenginfor1(e){
				uni.setStorageSync('aoyashenginfor',e)
				uni.navigateTo({
					url:'/pages/xueshenginfor1/xueshenginfor1'
				})
			},
			// 确认该课程今日是否核销过，未核销执行，课程记录好最后上课时间，记录一条老师的上课记录
			fun3(){
				uni.showLoading({
					title:"处理数据中……",
					mask:true
				})
				this.shu3=getDateTime.dateTimeStr('y-m-d')
				let linshitime=getDateTime.dateTimeStr('y-m-d h:i:s')
				if(this.kecheng1.lastshangketime==this.shu3){
					uni.showToast({
						title: '今日课已核销过，请不要重复核销！',
						duration:2000,
						icon:'none'
					});
					uni.hideLoading()
				}else{
					// 给课程记录好最后上课时间，记录一条老师的上课记录
					uniCloud.callFunction({
						name:"weifun",
						data:{
							leixing:5,//类型为4时，数据库中增加核销名单
							id:this.kecheng1._id,//课程ID
							laoshiid:this.kecheng1.laoshiid,
							laoshiname:this.kecheng1.laoshi,
							laoshitel:this.kecheng1.laoshitel,
							keshifeitolaoshi:parseFloat(this.kecheng1.keshifeitolaoshi),
							kechengname:this.kecheng1.name,
							kechengxiaoqu:this.kecheng1.xiaoqu,
							lastshangketime:this.shu3,
							fenleiid:'A'+this.kecheng1.fenleiid,
							time:linshitime
						}
					}).then(res=>{
						this.kecheng1.lastshangketime=this.shu3
						uni.setStorageSync('aoyashengkecheng1',this.kecheng1)
						this.fun2()
						uni.hideLoading()
					})
					
				}
			},
			async fun2(){
				uni.showLoading({
					title:"数据处理中……",
					mask:true
				})
				await this.fun1()
				// 一、把已选中学生数据加入【销课表】中；
				// 二、【报课表】中销完课的状态改为0；
				// 三、【报课表】中续费的课状态改为1
				// 四、选中的学生,销课数+1,并更新数据
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:4,//类型为4时，数据库中增加核销名单
						hexiaolist:this.hexiaolist,
						hexiaolist1:this.hexiaolist1,
						kexiaoendtime:getDateTime.dateTimeStr('y-m-d h:i:s'),
						checkedArr:this.checkedArr
					}
				}).then(res=>{
					this.$router.go(0)
					uni.showToast({
						title: '核销成功！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
				})
			},
			// 记录出来本次销课的报课明细，找出本次销课后剩余0课时的报课明细
			fun1(){
				this.hexiaolist=[]
				this.hexiaolist1=[]
				let shijian=getDateTime.dateTimeStr('y-m-d h:i:s')
				for(let i=0;i<this.xueshenglist.length;i++){
					if(this.checkedArr.includes(String(this.xueshenglist[i]._id))){
						// 下面是找出来销课【完成】学生的ID
						if(parseInt(this.xueshenglist[i].kechengshu)<=(parseInt(this.xueshenglist[i].yihexiaoshu)+1)){
							this.hexiaolist1.push(this.xueshenglist[i]._id)
						}
						// 下面是找出来销课的人
						this.hexiaolist.push({
						yikefeiyong:this.xueshenglist[i].yikefeiyong,
						name:this.xueshenglist[i].id[0].name,
						xiaoqu:this.xueshenglist[i].xiaoqu,
						kecheng:this.xueshenglist[i].kecheng,
						kechengshu:this.xueshenglist[i].kechengshu,
						xiaoketime:shijian,
						yihexiaoshu:parseInt(this.xueshenglist[i].yihexiaoshu)+1,
						baokeid:this.xueshenglist[i]._id,
						jingshouren:this.jingshouren,
						jiaoxuelaoshiid:this.kecheng1.laoshiid,
						kechengfenleiid:'A'+this.kecheng1.fenleiid,
						kechengid:this.kecheng1._id,
						hexiao:0,
						xiaokepic:this.shu2,
						kexiaoendtime:getDateTime.dateTimeStr('y-m-d h:i:s'),
						beizhu:this.shu4
						})
					}
				}
			},
			// 点核销后，确认数量，确认后执行,取消后不执行，并执行fun3
			hexiao(){
				if(typeof this.kecheng1.keshifeitolaoshi == 'undefined'){
					uni.showToast({
						title: '联系管理员，设置该课程的课时费',
						icon:'none',
						duration:3000
					});
					return
				}
				var regexp = /^[1-9]\d*$/;
				if(!regexp.test(this.kecheng1.keshifeitolaoshi)){
					uni.showToast({
						title: '联系管理员，设置该课程的课时费',
						icon:'none',
						duration:3000
					});
					return
				}
				if(this.checkedArr.length==0){
					uni.showToast({
						title: '未选择学生！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(!this.shu2){
					uni.showToast({
						title: '上传完照片，再试',
						icon:'none',
						duration:2000
					});
					return
				}
				let that=this
				uni.showModal({
					title: '请确认！',
					content: '核销数量'+this.checkedArr.length,
					success: function (res) {
						if (res.confirm) {
							that.fun3()
						}else if (res.cancel) {
							return
						}
					}
				});
			},
			// 学生数据库调取，报这个课所有明细
			xueshenginfor() {
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:3,//类型为3时，获取我所教学本课程的学生名单
						_id:this.kecheng1._id,
					}
				}).then(res=>{
					this.xueshenglist=res.result.data
					this.show1=this.xueshenglist.length?true:false
				})
			},
			// 到学生详情页
			xuesheng(){
				uni.navigateTo({
						url: "/pages/xueshengdetail/xueshengdetail",
						})
			},
			// 更改多选框是否选择
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			}
		},
	}
</script>

<style>
page{
	background-color: #f8f8f8;
	padding: 0 0 100rpx 0;
}
</style>
